<script setup lang="ts">
import { ref } from "vue";

import {
  ElCheckboxGroup,
  ElCheckbox,
} from "element-plus";

const props = defineProps({
  item: {
    type: Object,
    default: () => { },
  },
  index: {
    type: Number,
    default: 0
  },
  collectIdList: {
    type: Array as any,
    default: () => []
  },
  collectShow: { //是否显示收藏
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['change', 'addCollect']);

function change(value: any) {
  emits('change', value)
}

 function shuffleArray(array: []) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const options = shuffleArray(props.item.item) as any
</script>

<template>
    <div class="margin-b-15">
      <p  class="title">
        {{ index+1 }}.{{item.title}} 
        {{item.fraction}}分）
        <span v-if="collectShow" :class="['collect-icon', collectIdList.includes(item.question_id) ? 'red' : '']" title="收藏" @click="emits('addCollect', item.question_id)">✿</span>
      </p>
      <el-checkbox-group v-model="item.val" @change=change>
        <el-checkbox v-for="o in options" :label="`${o.value}`" :value="o.value"/>
      </el-checkbox-group>
      <span v-if="item.error" class="red"> 回答错误</span>
    </div>
</template>
